<template>
	<view class="home">
		<view class="topContent">
			<view class="title">
				<view class="titleName">
					鸿飞集团
				</view>
			</view>
			<view class="time">
				创建时间：2021-08-23 15:52
			</view>
		</view>
		<view class="middleContent">
				<view class="title">
						<view class="">
							流动概览
						</view>
						<view class="right-content">
							<u-dropdown style="">
								<u-dropdown-item  v-model="optionVal1" :title="optionTitle1"  :options="options1" @change="optionChange1">
								</u-dropdown-item>
							</u-dropdown>
						</view>
					</view>
					<view class="echartData">
						<view class="charts-box">
						      <!-- <qiun-data-charts type="demotype" :opts="{xAxis:{axisLineColor:'#FFBB17',boundaryGap:'justify'}, yAxis:{gridType:'dash',}, legend:{show:false},color:['#FFBB17','#FFD267'],extra:{column:{width:20,linearType:'custom',seriesGap:5,linearOpacity:0.5,barBorderCircle:false,customColor:['#FFBB17','#FFD267']}}}" :chartData="chartsDataColumn5"/> -->
						      <view class="charts-box">
								<qiun-data-charts  canvasId="canvasId2" :canvas2d="true" type="area" :opts="{legend:{show:false},extra:{area:{type:'curve',addLine:true,gradient:false}}}" :chartData="chartsDataColumn5"/>
						
							  </view>
						</view>
					</view>
		</view>
		
		<view class="middleContent" >
				<view class="title">
						<view class="">
							成交概况
						</view>
						<view class="right-content">
							<u-dropdown style="">
								<u-dropdown-item    v-model="optionVal2" :title="optionTitle2"  :options="options2" @change="optionChange2">
								</u-dropdown-item>
							</u-dropdown>
						</view>
					</view>
					<view class="echartData">
						<view class="charts-box">
						      <!-- <qiun-data-charts type="demotype" :opts="{xAxis:{axisLineColor:'#FFBB17',boundaryGap:'justify'}, yAxis:{gridType:'dash',}, legend:{show:false},color:['#FFBB17','#FFD267'],extra:{column:{width:20,linearType:'custom',seriesGap:5,linearOpacity:0.5,barBorderCircle:false,customColor:['#FFBB17','#FFD267']}}}" :chartData="chartsDataColumn5"/> -->
						      <view class="charts-box">
								<qiun-data-charts  canvasId="canvasId3" :canvas2d="true" type="area" :opts="{legend:{show:false},extra:{area:{type:'curve',addLine:true,gradient:false}}}" :chartData="chartsDataColumn5"/>
						
							  </view>
						</view>
					</view>
		</view>
		
		
		<view class="bottomContent">
				<view class="title">
					<view class="titleName">
						群内热词
					</view>
					<view class="right-content" style="color: #2772FE;">
						查看本周
					</view>
				</view>
				<view class="">
					<hotWords :greenData="greenData" :redData="redData"></hotWords>
				</view>
		</view>
		
	</view>
</template>

<script>
	import hotWords from '@/component/hotWords/hotWords.vue'
	export default {
		data() {
			return {
				greenData:[
					'开学',
					'奥运会',
					'游戏',
					'暑假',
					'换季衣服',
				],
				redData:[
					'台风',
					'房价',
					'金牌',
				],
				optionVal1 : 1,
				optionTitle1: '按周',
				options1: [
					{
						label: '按周',
						value: 1,
					},
					{
						label: '按月',
						value: 2,
					},
				],
				optionVal2 : 2,
				optionTitle2: '按月',
				options2: [
					{
						label: '按周',
						value: 1,
					},
					{
						label: '按月',
						value: 2,
					},
				],
				chartsDataColumn5:{
						categories:[
							"1",
							"2",
							"3",
							"4",
							"5",
							"6",
							"7",
							"8",
							"9",
							"10",
							"11",
							"12",
						],
						series:[
							{
								data:[
									31,
									32,
									33,
									34,
									35,
									36,
									35,
									34,
									33,
									34,
									33,
									34,
								],
								name:'完成量',
							},
						]
					},
				
			};
		},
		methods:{
			optionChange1(_index){
				console.log(_index);
				this.optionTitle1 = this.options1[_index-1].label
			},
			optionChange2(_index){
				console.log(_index);
				this.optionTitle2 = this.options2[_index-1].label
			},
		},
		components:{
			hotWords,
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-dropdown__content{
		height: 200rpx !important;
		box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
	}
	/deep/ .u-cell_title{
		white-space: nowrap;
	}
	// /deep/ .u-border-bottom{
	// 	z-index: 99 !important;
	// 	background-color: #fff !important;
	// }
	
	.home{
		
		.topContent {
			background-color: #fff;
		  .title {
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  padding: 20rpx 20rpx 0;
			  margin: 10rpx 0;
			  color: #111111;
			  height: 80rpx;
				.titleName {
					font-weight: 600;
					font-size: 30rpx;
					margin-left: 30rpx;
					position: relative;
				}
				.titleName::before{
					content: '';
					position: absolute;
					left: -15%;
					top: 15%;
					width: 4rpx;
					height: 28rpx;
					background: #2772FE;
				}
		  }
		
		  .time{
			  color: #888888;
			  margin-left: 50rpx;
		  }
		}
	
		
		.middleContent{
				background-color: #fff;
				margin-top: 30rpx;
				.title {
							  display: flex;
							  justify-content: space-between;
							  align-items: center;
							  padding: 20rpx;
							  color: #111111;
							  height: 80rpx;
								.titleName {
									font-weight: 600;
									font-size: 30rpx;
									margin-left: 30rpx;
									position: relative;
								}
								.titleName::before{
									content: '';
									position: absolute;
									left: -15%;
									top: 15%;
									width: 4rpx;
									height: 28rpx;
									background: #2772FE;
								}
							
								.right-content {
									border: 1px solid #EEEEEE;
									height: 60rpx;
									width: 120rpx;
									display: flex;
									align-items: center;
									
								}
				}
				
		}
			
		.bottomContent {
				margin-top: 38rpx;
				background-color: #fff;
				padding-bottom: 30rpx;
				.title {
							  display: flex;
							  justify-content: space-between;
							  padding: 20rpx;
							  color: #111111;
								.titleName {
									font-weight: 600;
									font-size: 30rpx;
									margin-left: 30rpx;
									position: relative;
								}
								.titleName::before{
									content: '';
									position: absolute;
									left: -15%;
									top: 15%;
									width: 4rpx;
									height: 28rpx;
									background: #2772FE;
								}
							
								.right-content {
							
								}
				}
							
				.hotKeyData{
					height: 300rpx;
					background-color: #fff;
					display: grid;
					place-items: center;
					overflow: hidden;
					position: relative;
					width: 100%;
					.box{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						background: linear-gradient(to bottom, #F4F8FD 0%, #F4F8FD 100%);
						border-radius: 50%;
						width: 600rpx;
						height: 600rpx;
						display: flex;
						align-items: center;
						&::after{
							content: '';
							position: absolute;
							top: 50%;
							left: 50%;
							background: linear-gradient(to bottom, #E0EBFD 0%, #F4F8FD 100%);
							transform: translate(-50%,-50%);
							width: 400rpx;
							height: 400rpx;
							border-radius: 50%;
							z-index: 1;
						}
						&:before{
							content: '';
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%,-50%);
							background: linear-gradient(to bottom, #C9DDFD 0%, #E0EBFD 100%);
							width: 200rpx;
							height: 200rpx;
							border-radius: 50%;
							z-index: 2;
						}
						.greenData{
							width: 450rpx;
							// background-color: pink;
							height: 230rpx;
							position: relative;
							.icon{
								
							}
							.greenDataItem{
								color: #888888;
								position: absolute;
								// width: 60rpx;
								// height: 80rpx;
								background-color: red;
								display: flex;
								justify-content: center;
								align-items: center;
								&::after{
									// position: absolute;
									top: 2%;
									left: 40%;
									content: '';
									width: 16rpx;
									height: 16rpx;
									border-radius: 50%;
									background-color: #75C9B6;
								}
								&:after{
									position: absolute;
									top: 2%;
									left: 40%;
									content: '';
									width: 28rpx;
									height: 28rpx;
									border-radius: 50%;
									border:2px solid #75C9B6;
								}
							}
						}
						.redData{
							.redDataItem{
								
							}
						}
						
					}
					.title{
						border-radius: 50%;
						color: #fff;
						background-color: #6197FC;
						width: 100rpx;
						height: 100rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						display: flex;
						justify-content: center;
						align-items: center;
						
					}
				}
									
		}
		
	}	
</style>
